<template>
    <div class="nav-bar">
      <h1>
        <div class="nav-bar-logo">
          <img src="@/assets/image/logo.png" style="width: 2.5rem;" />         
        </div>
        <a href="https://aihome.chat/" class="nav-bar-link" target="_blank">Ai<span style="color: #ffe658;">Home</span> 标签页</a>
      </h1>
      <!-- 移动端右侧三根线按钮，点击显示导航菜单 -->
      <!-- <button type="button" id="navTrigger">
      <img src="@/assets/image/navtrigger.png" style="width: 32px;"/>
      </button> -->
    </div>
  </template>
  
  <script setup lang="ts">
  </script>
  
  <style scoped>
  .nav-bar {
    position: relative;
    margin-bottom: 1.25rem;
    display: flex;
    height: 70px;
    width: 100%;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between; 
    color: white;
    padding-left: 12rem; 
    padding-right: 10rem;
  }
  /* 小屏幕样式（宽度小于 1024px） */
@media (max-width: 1023px) {
  .nav-bar {
      padding-left: 1.25rem; 
      padding-right: 1.25rem;
  }
}
  
  .nav-bar h1 {
    display: flex;
    align-items: center;
    font-size: 1.25rem; 
    font-weight: bold;
  }

  .nav-bar-logo {
    margin-right: 0.5rem;
    display: flex;
    height: 48px;
    width: 48px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    /* bg-white：背景颜色为白色 */
    background-color: white;
  }
  .nav-bar-link{
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    text-decoration: none;
  }
  #navTrigger {
    position: relative;
    top: 0;
    display: flex;
    height: 32px;
    width: 32px;
    align-items: center;
    background-color: transparent;
    border: none;
    cursor: pointer;
}
/* 电脑屏幕尺寸下隐藏按钮 */
@media (min-width: 1024px) {
  #navTrigger {
    display: none;
  }
}


  </style>